<template>
	<view class="page">
		<view class="head">
			<view class="avatar"><image :src="userAvatarUrl" class="avtarImg" alt="" mode="aspectFit"></image></view>
			<view class="nickName">{{ userNickName }}</view>
			<view class="userId">ID:{{ userId }}</view>
			<view class="tipsText">{{ toolTips }}</view>
		</view>
		<view class="center">
			<view class="itemList">
				<view class="item" @click="openMyRelease()">
					<view class="itemIco"><image :src="$getImgUrl('/images/yhzx-fb.png')" mode="aspectFit" class="icoImg"></image></view>
					<view class="itemText">我的发布</view>
					<view class="itemMore">></view>
				</view>
				<view class="item">
					<view class="itemIco"><image :src="$getImgUrl('/images/yhzx-ye.png')" mode="aspectFit" class="icoImg"></image></view>
					<view class="itemText">红包余额：￥{{ userBalanceFormat }}</view>
				</view>
				<view class="item" @click="openMyCollection">
					<view class="itemIco"><image :src="$getImgUrl('/images/yhzx-sc.png')" mode="aspectFit" class="icoImg"></image></view>
					<view class="itemText">我的收藏</view>
					<view class="itemMore">></view>
				</view>
				<view class="item" @click="openMyMessage">
					<view class="itemIco"><image :src="$getImgUrl('/images/yhzx-xx.png')" mode="aspectFit" class="icoImg"></image></view>
					<view class="itemText">我的消息</view>
					<view class="itemMore">></view>
				</view>
				<view class="item" @click.stop="openUserSetting()">
					<view class="itemIco"><image :src="$getImgUrl('/images/yhzx-sq.png')" mode="aspectFit" class="icoImg"></image></view>
					<view class="itemText">我的授权</view>
					<view class="itemMore">></view>
				</view>
				<view class="item" @click="openCustomerService">
					<view class="itemIco"><image :src="$getImgUrl('/images/kf.png')" mode="aspectFit" class="icoImg"></image></view>
					<view class="itemText">联系客服</view>
					<view class="itemMore">></view>
				</view>
				<view class="item" @click="openAboutUs">
					<view class="itemIco"><image :src="$getImgUrl('/images/gywm.png')" mode="aspectFit" class="icoImg"></image></view>
					<view class="itemText">关于我们</view>
					<view class="itemMore">></view>
				</view>
			</view>
		</view>
		<view class="bottom"></view>
		<wl-modal ref="wlModal"  :cancelFunction="getPhoneNumber"></wl-modal>
	</view>
</template>

<script>
import wlModal from '@/components/wl-modal/wl-modal.vue';
import { moneyFormat } from '../../common/common.js';
export default {
	data() {
		return {
			globaUserInfo: {},
			userAvatarUrl: '',
			userNickName: '',
			userBalance: '',
			userFreeReleaseNumbers: 0,
			userDaysRemaining: 0,
			userId: 0,
			isVip: false
		};
	},
	async onLoad() {
		await this.$onLaunched;
		this.globaUserInfo = uni.getStorageSync('globaUserInfo');
		this.userAvatarUrl = this.globaUserInfo.avatarUrl;
		this.userNickName = this.globaUserInfo.nickName;
		console.log(this.globaUserInfo);
		this.init();
	},
	onShow() {
		// this.showGetPhoneNumber()
	},
	methods: {
		init() {
			this.getUserVIPToNO();
			this.getUserFreeReleaseNumber();
			this.getUserBalanceAndId();
		},
		getUserVIPToNO() {
			this.$api.getUserVIPToNO({ openid: getApp().globalData.openid, city_name: getApp().globalData.cityName }).then(res => {
				console.log(res);
				if (res.data.IsVIP) {
					this.isVip = true;
				} else {
					this.isVip = false;
				}
				this.userDaysRemaining = res.data.Day;
				uni.modStorageSync('globaUserInfo', res)
				console.log(uni.getStorageSync('globaUserInfo'))
			});
		},
		getUserFreeReleaseNumber() {
			this.$api.getUserFreeReleaseNumber({ openid: getApp().globalData.openid }).then(res => {
				console.log(res);
			});
		},
		getUserBalanceAndId() {
			this.$api.getUserBalanceAndId({ openid: getApp().globalData.openid }).then(res => {
				console.log(res);
				this.userId = res.data.ID;
				this.userBalance = res.data.YYMoney;
			});
		},
		openUserSetting() {
			let that = this
			uni.openSetting({
				success(res) {
					if (!res.authSetting['scope.userInfo'] && !res.authSetting['scope.userLocation']) {
						console.log('全部没有授权');
						that.showMessage('用户授权', '为了更好为您服务，请开启授权')
					} else if (!res.authSetting['scope.userInfo']) {
						that.showMessage('用户授权', '为了更好为您服务，请开启用户信息授权')
					} else if (!res.authSetting['scope.userLocation']) {
						that.showMessage('用户授权', '为了更好为您服务，请开启位置消息授权')
					}
				}
			});
		},
		openCustomerService(){
			uni.navigateTo({
				url:'../customerService/customerService'
			})
		},
		openAboutUs(){
			uni.navigateTo({
				url:'../aboutUs/aboutUs'
			})
		},
		openMyMessage(){
			uni.navigateTo({
				url:'../myMessage/myMessage'
			})
		},
		openMyRelease(){
			uni.navigateTo({
				url:'../myRelease/myRelease'
			})
		},
		openMyCollection(){
			uni.navigateTo({
				url: '../myCollection/myCollection'
			})
		},
		showMessage(title, content) {
			let that = this;
			this.$showModal({
				title: title,
				content: content,
				showCancel: true,
				cancelText: '取消',
				cancelColor: '#c70109',
				confirmText: '设置',
				confirmColor: '#3CC51F'
			})
				.then(res => {
					// 点击确认的操作
					this.openUserSetting()
					console.log('showMessage', res);
					console.log('用户点击确定');
					
				})
				.catch(err => {
					// 点击取消按钮的操作
					console.log('showMessage', err);
					console.log('用户点击取消!');
				});
		},
		showGetPhoneNumber: function(e) {
			this.$refs.wlModal.showModal({
				title: '绑定手机号', // 提示标题
				content: '为了更好的服务于您，需要绑定您的手机号', // 提示内容
				cancelText: '绑定手机', // 取消按钮的文字
				confirmText: '手动绑定', // 确认按钮文字
				showCancel: true, // 是否显示取消按钮，默认为 true
				confirmColor: '#3CC51F', // 确定按钮颜色
				cancelColor: '#c70109', // 取消按钮颜色
				textAlign: 'center', // 对齐方式
				confirmOpenType: '', // 确定按钮open-type
				cancelOpenType: 'getPhoneNumber', // 取消按钮open-type
				success: res => {
					console.log(res);
					if (res.confirm) {
						uni.showToast({
							title: '点击了确定',
							icon: 'none',
							duration: 2000
						});
					} else {
						this.getPhoneNumber();
						uni.showToast({
							title: '点击了取消',
							icon: 'none',
							duration: 2000
						});
					}
				} // 回调方法
			});
		},
		getPhoneNumber: function(e) {
			// 方法通过绑定自定义属性方式传给子组件
			// this.visible = false;// 用于关闭对话框
			console.log('getPhoneNumber',e);
			if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
				console.log('用户点击了拒绝');
			} else {
				console.log(JSON.stringify(e.detail.encryptedData));
				console.log(JSON.stringify(e.detail.iv));
				this.visible = false; // 用于关闭对话框
			}
		}
	},
	computed: {
		toolTips() {
			if (this.isVip) {
				return '您当日剩余的天数为' + this.userDaysRemaining + '天';
			} else {
				return '您当日剩余的免费发表次数为 ' + this.userFreeReleaseNumbers;
			}
		},
		userBalanceFormat() {
			return moneyFormat(this.userBalance, 2);
		}
	},
	components: {
		wlModal
	}
};
</script>

<style scoped>
@import url('me.css');
</style>
